<template>
	<view class="mainpadding" v-if="pageShow">
		<!-- 个人信息 -->
		<u-popup :show="show" @close="show=false" :round="20" v-if="listsc.data.length">
			<view class="mainpadding" style="background-color: #282536;" v-if="listsc.data.length">
				<view class="textcenter titletext xiaobai">发布者</view>
				<view class="margin_top flexbetween" @click="jumper('/pages_homepage/gerenzhuye?id=',listsc.data[currentindex].video.user.id)">
					<view class="flexleft">
						<image class="grtoux margin_right3" :src="listsc.data[currentindex].video.user.avatar_text" mode="">
						</image>
						<view class="textcenter sanshier xiaobai">{{listsc.data[currentindex].video.user.nickname}}</view>
					</view>
					<view class="honbtn flexcenter"
						v-if="listsc.data[currentindex].video.is_gz==0 && listsc.data[currentindex].video.user.id!=myuserId" @click.stop="gz_fn(listsc.data[currentindex].video.user.id)">关注</view>
				</view>
				<view class="flexbetween margin_top5">
					<view class="grbox flexleft" style="padding: 26rpx 40rpx;" @click="dz_fn();show=false;">
						<view class="dianzan margin_right1"></view>
						<view class="xiaobai ershil" v-if="listsc.data[currentindex].video.is_dz==0">点赞视频</view>
						<view class="xiaobai ershil" v-if="listsc.data[currentindex].video.is_dz==1">取消点赞</view>
					</view>
					<view class="grbox flexleft" style="padding: 24rpx 40rpx;" @click="sc_fn();show=false;">
						<view class="shoucang margin_right1"></view>
						<view class="xiaobai ershil" v-if="listsc.data[currentindex].video.is_collect==0">收藏视频</view>
						<view class="xiaobai ershil" v-if="listsc.data[currentindex].video.is_collect==1">取消收藏</view>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="">
			<view class="">
				<view class="flexleft" style="width: 100%;"	>
					<view class="grtoux margin_right2">
						<image :src="userInfo.avatar_text" mode=""></image>
					</view>
					<view class="" style="width: 100%;">
						<view class="flexbetween" >
							<view class="titletext xiaobai">{{userInfo.nickname}}</view>
							<view class="flexright">
								<view class="xiaobbtn flexcenter margin_right1" v-if="userInfo.id!=myuserId" @click="sixin()">聊天</view>
								<view class="xhbtn flexcenter" v-if="userInfo.is_gz==0 && userInfo.id!=myuserId" @click.stop="gz_fn(userInfo.id)">关注</view>
								<view class="xhbtn flexcenter" v-if="userInfo.is_gz==1 && userInfo.id!=myuserId" @click.stop="gz_fn(userInfo.id)">已关注</view>
							</view>
						</view>
						<view class="strongtext xiaohui margin_top2">{{userInfo.bio}}</view>
					</view>
				</view>
			</view>
			<view class="baibbox flexbetween margin_top">
				<view class="flexcenter sanshis">
					<view class="">
						<view class="titletext textcenter xiaobai fonweight">{{userInfo.mygz_num}}</view>
						<view class="ershil textcenter xiaohui margin_top1">关注</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="flexcenter sanshis">
					<view class="">
						<view class="titletext textcenter xiaobai fonweight">{{userInfo.myfs_num}}</view>
						<view class="ershil textcenter xiaohui margin_top1">粉丝</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="flexcenter sanshis">
					<view class="">
						<view class="titletext textcenter xiaobai fonweight">{{userInfo.dz_num}}</view>
						<view class="ershil textcenter xiaohui margin_top1">获赞</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="margin_top1">
			<!-- 导航 -->
			<view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in navList" :key="index">
					<view :class="{'active':isActive === index}" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- 动态 -->
			<!-- <view class="" v-if="isActive == 0">
				<view class="margin_top mainpadding dtbox" v-for="item in 3">
					<view class="xiahuaxian">
						<view class="flexleft">
							<view class="xtoux margin_right2">
								<image src="../static/image/sysem/shilitu.png" mode=""></image>
							</view>
							<view class="">
								<view class="titletext xiaobai">陆拾柒的小可爱</view>
								<view class="strongtext xiaohui margin_top1">2023-03-15 16:23:40</view>
							</view>
						</view>
						<view class="titletext xiaobai fonweight margin_top">苍老师在线教学</view>
						<view class="ershil xiaohui margin_top">要了解真正的儒学，不了解史前宗教是不行的，因为儒学原本是正式的宗教儒教的宗教教义。新文化运动引...
						</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="flexleft">
							<image class="gnicon margin_right1" src="../static/image/sysem/bj.png" mode=""></image>
							<view class="ershiba xiaobai">编辑</view>
						</view>
						<view class="flexleft">
							<image class="gnicon margin_right1" src="../static/image/sysem/sj.png" mode=""></image>
							<view class="ershiba xiaobai">上架</view>
						</view>
						<view class="flexleft">
							<image class="gnicon margin_right1" src="../static/image/sysem/sc1.png" mode=""></image>
							<view class="ershiba xiaobai">删除</view>
						</view>
						<view class="flexleft">
							<image class="gnicon margin_right1" src="../static/image/sysem/pj.png" mode=""></image>
							<view class="ershiba xiaobai">评论</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 作品 -->
			<view class="" v-if="isActive == 0">
				<view class="flexbetween flex_wrap">
					<view class="shibox margin_top" v-for=" item in list.data" :key="item.id" @click="jumpDetail(item.id,item.user_id,item.data_type);item.view_num=Number(item.view_num)+1">
						<view class="dingwei">
							<view class="jinbbox flexcenter" v-if="Number(item.price)">
								<image class="jinvi" src="../static/image/sysem/jb.png" mode=""></image>
								<view class="strongtext fonweight" style="color:#FEC84F ;">{{item.price}}</view>
							</view>
							<image class="shilitu" :src="item.image_text" mode=""></image>
							<view class="flexbetween"
								style="position: absolute;bottom: 20rpx; left: 20rpx; width: 88%;">
								<view class="bofangbox flexcenter">
									<view class="margin_right1">
										<u-icon name="play-right" color="#fff" size="14"></u-icon>
									</view>
									<view class="smalltext xiaobai">{{item.view_num}}</view>
								</view>
								<view class="smalltext xiaobai ">{{formatSeconds(Number(item.sc))}}</view>
							</view>
						</view>
						<view class="spbrbox ">
							<view class="ershil xiaobai xiankuan">{{item.des}}</view>
							<view class="flexbetween margin_top" v-if="item.user_id==myuserId">
								<view class="honhsbox flexcenter" @click.stop="shangxiajia(item.id)">
									<image class="sjhicon margin_right1" src="../static/image/sysem/sjh.png" mode="">
									</image>
									<view class="strongtext xiaohong">{{item.status==1?"下架":"上架"}}</view>
								</view>
								<view class="honhsbox flexcenter" @click.stop="delvideo(item.id)">
									<image class="sjhicon margin_right1" src="../static/image/sysem/sc1h.png" mode="">
									</image>
									<view class="strongtext xiaohong">删除</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 收藏 -->
			<view class="" v-if="isActive == 1">
				<view class="flexbetween flex_wrap">
					<view class="shibox margin_top" v-for="(item,index) in listsc.data" :key="item.id" @click="jumpDetail(item.video.id,item.video.user.id,item.video.data_type);item.video.view_num =Number(item.video.view_num)+1">
						<view class="dingwei">
							<view class="jinbbox flexcenter" v-if="Number(item.video.price)">
								<image class="jinvi" src="../static/image/sysem/jb.png" mode=""></image>
								<view class="strongtext fonweight" style="color:#FEC84F ;">{{item.video.price}}</view>
							</view>
							<image class="shilitu" :src="item.video.image_text" mode=""></image>
							<view class="flexbetween"
								style="position: absolute;bottom: 20rpx; left: 20rpx; width: 88%;">
								<view class="bofangbox flexcenter">
									<view class="margin_right1">
										<u-icon name="play-right" color="#fff" size="14"></u-icon>
									</view>
									<view class="smalltext xiaobai">{{item.video.view_num}}</view>
								</view>
								<view class="smalltext xiaobai ">{{formatSeconds(Number(item.video.sc))}}</view>
							</view>
						</view>
						<view class="spbrbox" @click.stop="currentindex=index;show = true">
							<view class="ershil xiaobai yhxk">{{item.video.des}}</view>
							<view class="flexbetween margin_top">
								<view class="flexleft">
									<image class="touxiang margin_right1" :src="item.video.user.avatar_text" mode=""></image>
									<view class="strongtext xiaohui ">{{item.video.user.nickname}}</view>
								</view>
								<image class="sangd" src="../static/image/sysem/sgd.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				isActive: 0,
				navList: [{
					title: "作品"
				}, {
					title: "收藏"
				}],
				listuser_id:"",
				myuserId:"",
				userInfo:{},
				page: 1,
				list: {
					data: []
				},
				pagesc: 1,
				listsc: {
					data: []
				},
				show:false,
				currentindex:0,
				currentid:"",
				modal:{
					modalShow:false,
					title:"是否确认删除该视频？",
				},
				pageShow:false
			}
		},
		onLoad(options) {
			this.listuser_id = options.id
			this.getonfo()
			this.init()
			this.initsc()
		},
		onShow() {
			this.myuserId = uni.getStorageSync("user_id")
		},
		methods: {
			sixin() {
				if (this.listuser_id == this.user_id) { //如果当前主页的id是自己的话不走下面逻辑
					return false
				}
				let that = this
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/user/addFriends', 'GET', {
					firend_id:this.listuser_id
				}).then(res => {
					uni.hideLoading()
					let data = {
						firend_id: this.listuser_id,
						friend_name: this.userInfo.nickname,
						firend_avatar_text: this.userInfo.avatar_text
					}
					uni.navigateTo({
						url: "/pages_message/chat?msg=" + encodeURIComponent(JSON.stringify(data))
					})
				})
				
			},
			dz_fn() { //点赞/取消点赞
				httpRequest.request('/api/videocl/clVideoDz', 'GET', {
					id: this.list.data[this.currentindex].video.id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.list.data[this.currentindex].video.is_dz = this.list.data[this.currentindex].video.is_dz == 0 ?
							1 : 0
					}
				})
			},
			sc_fn() { //收藏/取消收藏
				httpRequest.request('/api/videocl/clVideoCollect', 'GET', {
					id: this.list.data[this.currentindex].video.id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.list.data[this.currentindex].video.is_collect = this.list.data[this.currentindex].video
							.is_collect == 0 ? 1 : 0
					}
				})
			},
			gz_fn(id){ //关注/取消关注
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id: id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getonfo()
						this.init()
						this.initsc()
						uni.$emit("guanzhuemitfn", {is_gz:this.userInfo.is_gz==0?1:0,frienduser_id:id})
					}
				})
			},
			shangxiajia(id){//视频上下架
				httpRequest.request('/api/videocl/clVideoStatus', 'GET', {
					video_id: id
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.init()
					}
				})
			},
			jumpDetail(id, listuser_id,type) {
				// uni.navigateTo({
				// 	url: "/pages_homepage/shipinxq?id=" + id + "&listuser_id=" + listuser_id
				// })
				// return false
				if(type==1){
					uni.navigateTo({
						url: "/pages_homepage/shipinxq?id=" + id + "&listuser_id=" + listuser_id
					})
				}else{
					uni.navigateTo({
						url:"/pages_homepage/shipin/shipin?id="+id
					})
				}
				this.addviewnum(id)
			},
			addviewnum(id){
				httpRequest.request('/api/videocl/addViewNum', 'GET', {
					id
				}).then(res => {})
			},
			delvideo(id){
				this.currentid = id
				this.modal.modalShow = true
			},
			modalSure(){
				if(this.modal.title=="是否确认删除该视频？"){
					httpRequest.request('/api/videocl/delVideo', 'GET', {
						video_id: this.currentid
					}).then(res => {
						httpRequest.toast(res.msg)
						if(res.code==1){
							this.init()
						}
					})
				}
				this.modalcancel()
			},
			modalcancel(){
				this.modal.modalShow = false
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/videocl/myVideoIndex', 'GET', {
					page: page || 1,
					limit: 12,
					user_id: this.listuser_id
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			initsc(isPage, page) {
				let _this = this
				httpRequest.request('/api/user/myVideoCollect', 'GET', {
					page: page || 1,
					limit: 12,
					user_id: this.listuser_id
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.listsc;
						if (isPage == true) {
							_this.listsc.data = dataList.data.concat(resList.data);
						} else {
							_this.listsc = res.data
							_this.listsc.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			jumper(url,val) {
				uni.navigateTo({
					url: url+val
				})
			},
			onReachBottom() {
				let _this = this;
				let list = null
				let page = null
				if (this.isActive == 0) {
					list = _this.list;
					page = _this.page;
				}
				if (this.isActive == 1) {
					list = _this.listsc;
					page = _this.pagesc;
				}
				if (list.last_page <= page) {
					return false;
				}
				page++;
				if (this.isActive == 0) {
					_this.page = page;
					_this.init(true, page);
				}
				if (this.isActive == 1) {
					_this.pagesc = page;
					_this.initsc(true, page);
				}
			},
			getonfo(){
				httpRequest.request('/api/index/userPage', 'GET', {
					id: this.listuser_id
				}).then(res => {
					this.userInfo = res.data
					this.pageShow = true
				})
			},
			// 跳转视频详情
			tzxiangq() {
				uni.navigateTo({
					url: '/pages_homepage/shipinxq'
				})
			},
			checked(index) {
				this.isActive = index
			},
		}
	}
</script>
<style lang="scss" scoped>
	// 视频
	.sangd {
		width: 4rpx;
		height: 24rpx;
	}

	.touxiang {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
	}

	.spbrbox {
		padding: 30rpx 20rpx;
	}

	.bofangbox {
		padding: 7rpx 10rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		background-color: rgba(255, 255, 255, .3);
	}

	.shilitu {
		width: 332rpx;
		height: 176rpx;
		border-radius: 13rpx 13rpx 0rpx 0rpx;
	}

	.shibox {
		width: 48%;
		background: #282536;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
	}
</style>
<style lang="scss" scoped>
	.sjhicon {
		width: 25rpx;
		height: 25rpx;
	}

	.honhsbox {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #DD5056;
		width: 141rpx;
		height: 57rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #DD5056;
	}

	.jinvi {
		width: 22rpx;
		margin-right: 7rpx;
		height: 22rpx;

	}

	.jinbbox {
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		background: #FF4B53;
		border-radius: 13rpx 0rpx 13rpx 0rpx;
		padding: 5rpx 16rpx 5rpx 10rpx;
	}

	.gnicon {
		width: 25rpx;
		height: 25rpx;
	}

	.xtoux {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50rpx;

		image {
			border-radius: 50rpx;
			width: 100%;
			height: 100%;
		}
	}

	.dtbox {
		background: #282536;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		color: #484557;
	}

	.active {
		font-size: 30rpx;
		color: #F3F1FF;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 40rpx;
		height: 6rpx;
		border-radius: 9rpx;
		background-size: 100% 100%;
		background: #dd5056;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}

	.line {
		width: 1rpx;
		height: 43rpx;
		background-color: rgba(255, 255, 255, 0.40);
	}

	.baibbox {
		padding: 15rpx 0;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.8);
	}

	.xhbtn {
		background-color: #DD5056;
		width: 105rpx;
		height: 52rpx;
		border-radius: 41rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #fff;
	}

	.xiaobbtn {
		background-color: #fff;
		width: 105rpx;
		height: 52rpx;
		border-radius: 41rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #DD5056;
	}

	.grtoux {
		width: 112rpx;
		height: 112rpx;
		border-radius: 63rpx 63rpx 63rpx 63rpx;

		image {
			border-radius: 63rpx 63rpx 63rpx 63rpx;
			width: 100%;
			min-width: 112rpx;
			min-height: 112rpx;
			height: 100%;
		}
	}
</style>